/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-07 00:25:39
 */

import Input from "antd/lib/input/Input";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import designTemplateEditorStore from "../../designTemplateEditorStore";
import designTemplateEditor from "../../designTemplateEditorer";
import styles from "./toolTextFontSize.module.less";

interface Iprops {
}

// 字体大小
export default function ToolTextFontSize() {

    const [visible, setVisible] = useState(false);
    const [disable, setDisable] = useState(false);
    const [fontSize, setFontSize] = useState(20);

    useEffect(() => autorun(() => {
        const { activeObjectId, fontSize, lock } = designTemplateEditorStore;
        const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
        if (activeObjectId && activeObject && activeObject.type === "i-text") {
            setDisable(lock);
            setFontSize(fontSize);
            setVisible(true);
        } else {
            setVisible(false);
        }
    }), []);

    return (
        <div
            className={clsx(styles.toolTextFontSize, visible && styles.visible, disable && styles.disable)}
        >
            <Input
                key={fontSize}
                size="small"
                defaultValue={Math.floor(fontSize)}
                style={{
                    width: 40,
                    border: "none"
                }}
                // onWheel={e => {
                //     const value = (fontSize + Math.sign(e.deltaY));
                //     setFontSize(value);
                //     designTemplateEditor.setFontSize(value);
                // }}
                onBlur={e => {
                    const value = parseInt((e.target as HTMLInputElement).value);
                    setFontSize(value);
                    designTemplateEditor.setFontSize(value);
                }}
                onPressEnter={e => {
                    const value = parseInt((e.target as HTMLInputElement).value);
                    setFontSize(value);
                    designTemplateEditor.setFontSize(value);
                }}
            />
        </div>
    );

}